<template>
<div class="container">
  <p class="container--item__header">
    <span class="container--item__journalism">设置</span>
  </p>
  <ul class="container--item__box">
    <li class="container--item__bar">
      <img src="../assets/collection.png" alt="#" class="icon--collection">
      <span class="container--item__text">我的收藏</span>
      <img src="../assets/right.png" alt="#" class="icon--right">
    </li>
    <li class="container--item__bar">
    <img src="../assets/night.png" alt="#" class="icon--collection">
    <span class="container--item__text">夜间模式</span>
    <input type="checkbox" id="cons">
    <label for="cons"></label>
  </li>
    <li class="container--item__bar">
      <img src="../assets/brightness.png" alt="#" class="icon--collection">
      <span class="container--item__text">屏幕亮度</span>
      <span class="container--brightness" ref="boxs">
        <span class="container--brightness__circle" ref="circle"><span class="container--item__colour" ref="colour"></span></span>
      </span>
    </li>
    <li class="container--item__bar" >
      <img src="../assets/click.png" alt="#" class="icon--collection">
      <span class="container--item__text">双击关闭文章</span>
      <input type="checkbox" id="con">
      <label for="con"></label>
    </li>
    <li class="container--item__bar distance">
      <img src="../assets/design.png" alt="#" class="icon--collection">
      <span class="container--item__text">清理新闻缓存</span>
      <span class="currentVersion">429K</span>>
    </li>
    <li class="container--item__bar">
      <img src="../assets/stars.png" alt="#" class="icon--collection">
      <span class="container--item__text">为我们打分</span>
      <img src="../assets/right.png" alt="#" class="icon--right">
    </li>
    <li class="container--item__bar">
      <img src="../assets/share.png" alt="#" class="icon--collection">
      <span class="container--item__text">分享</span>
      <img src="../assets/right.png" alt="#" class="icon--right">
    </li>
    <li class="container--item__bar">
      <img src="../assets/feedback.png" alt="#" class="icon--collection">
      <span class="container--item__text">意见反馈</span>
      <img src="../assets/right.png" alt="#" class="icon--right">
    </li>
    <li class="container--item__bar">
      <img src="../assets/agreement.png" alt="#" class="icon--collection">
      <span class="container--item__text">用户协议</span>
      <img src="../assets/right.png" alt="#" class="icon--right">
    </li>
    <li class="container--item__bar">
      <img src="../assets/edition.png" alt="#" class="icon--collection">
      <span class="container--item__text">当前版本</span>
      <span class="currentVersion">1.7.1</span>
    </li>
  </ul>
  <div class="container--bottom">
    <div class="container--item__bottom homepage" @click = "page">
      <img src = "../assets/imges/page.png" alt="#" ref="page"><br>
      <span>首页</span>
    </div>
    <div class="container--item__bottom design" @click="video">
      <img src="../assets/imges/design.png" alt="#" ref="video"><br>
      <span>视频</span>
    </div>
    <div class="container--item__bottom set">
      <img src="../assets/imges/set2.png" alt="#" ref="set"><br>
      <span class="container--bottom__home">设置</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'set',
  methods: {
    page () {
      this.$bus.$emit('page')
      this.$router.push({name: 'top'})
    },
    video () {
      this.$bus.$emit('video')
      this.$router.push({name: 'video'})
    }
  },
  mounted () {
    /* eslint-disable*/
    let self = this, left, width;
    this.$refs.circle.addEventListener('touchstart', function (e) {
      // 阻止事件冒泡
      e.preventDefault();
      let touch = e.targetTouches[0];
      let disX = touch.pageX - this.offsetLeft;
      width = self.$refs.boxs.clientWidth - this.offsetWidth;
      this.addEventListener('touchmove', move);
      function move (e) {
        let touch = e.targetTouches[0];
        left = touch.pageX - disX;
        if (left < 0) {
          left = 0
        }
        if (width < left) {
          left = width
        }
        this.style.left = left + 'px'
        self.$refs.colour.style.width = left + 'px'
      }
      this.addEventListener('touchend', chend);
      function chend (e) {
        this.removeEventListener('touchmove', move);
        this.removeEventListener('touchend', chend)
      }
    })
  }
}
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .container{
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    overflow: hidden;
    .container--item__header{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      background: #fff;
      z-index: 999;
      line-height: 1.56rem;
      text-align: center;
      .container--item__journalism{
        font-size: .506666667rem;
        color: #151515;
      }
    }
    .container--item__box{
      position: relative;
      width: 100vw;
      list-style: none;
      top: 2rem;
      .distance{
        margin: .2rem 0;
      }
      .container--item__bar{
        position: relative;
        background: #fff;
        height: 1.26666666667rem;
        border-bottom: 1px solid #f5f5f5 ;
        box-sizing: border-box;
        .currentVersion{
          display: inline-block;
          font-size: .4rem;
          position: absolute;
          right: .4rem;
          top: .35rem;
          color: #7e7e7e;
        }
        .container--brightness{
          position: absolute;
          right: .8rem;
          top: .6rem;
          display: inline-block;
          background: rgba(142, 142, 142, 0.58);
          width: 4rem;
          height: 2px;
          border-radius: 30px;
          .container--brightness__circle{
            display: inline-block;
            width: .7rem;
            height: .7rem;
            box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
            border-radius: 50%;
            background: #fff;
            position: absolute;
            right: 0;
            top: -.35rem;
            z-index: 999;
            .container--item__colour{
              position: absolute;
              right: .8rem;
              top: .35rem;
              display: inline-block;
              width: 3.2rem;
              height: 2px;
              background: #62b7fb;
              z-index: 99;
            }
          }
        }
        input[type=checkbox]{
          display: none;
        }
        label{
          display: inline-block;
          width: 1.426666667rem;
          height: .8666666667rem;
          border-radius: 30px;
          background: #fff;
          position: absolute;
          right: .8rem;
          top: .2rem;
          box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
        }
        input:checked+label{
          background: orangered;
        }
        label::before{
          content: '';
          width: .8666666667rem;
          height: .8666666667rem;
          border-radius: 30px;
          background: #fff;
          position: absolute;
          left: 0;
          box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
          transition: left .2s ease-in-out;
        }
        input:checked+label::before{
          left: .56rem;
        }
        .icon--collection{
          vertical-align: middle;
          width: .533333333333rem;
          height: .533333333333rem;
          margin-left: .4rem;
        }
        .container--item__text{
          position: relative;
          left: .4rem;
          vertical-align: middle;
          line-height: 1.26666666667rem;
          font-size: .42rem;
          color: #7e7e7e;
        }
        .icon--right{
          position: absolute;
          right: .8rem;
          top: .35rem;
          width: .4rem;
          height: .4rem;
        }
      }
    }
  }
  .container--bottom{
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100vw;
    background: #fff;
    z-index: 999;
    line-height: 1.3333333333rem;
    border-top: 1px solid #e0e0e0;
    .homepage{
      position: absolute;
      left: 1.373333333rem;
      top: .333333333333rem;
    }
    .design{
      margin-top: .333333333333rem;
    }
    .set{
      position: absolute;
      top: .333333333333rem;
      right: 1.373333333rem;
    }
    .container--item__bottom{
      line-height: 0;
      display: inline-block;
      .container--bottom__home{
        line-height: 1rem;
        color: #d73737;
      }
      img{
        width: .6rem;
        height: .6rem;
      }
      span{
        line-height: 1rem;
        font-size: .293333333rem;
      }
    }
  }
</style>
